NeatLy is a responsive website designed to make notetaking easier on a computer. Using a traditional notebook can be hard to keep organized. You cannot rearrange pages, you need many pens for different colors, and they take up valuable space. NeatLy solves all these problems in an accessible app with a responsive design.

Before designing, I made sure to empathize with the user. I conducted three user interviews to understand common pain points. Many users are very interested in ease of use and useful content like tutorials or tips. Users are frustrated by apps that are not intuitive to use. I continued to create personas and a problem statement.

We conducted user research and received feedback from users that we incorporated into user personas. For example, our user persona, Juan, is a 20-year-old college student who is very education oriented. The research revealed that Juan was frustrated that he could not rearrange his notes in his notebooks, and they took up too much space on his desk. Juan would like to see improvements to the mobile version like a cleaner navigation bar and he would like the ability to export his notes.

Currently, the site has a busy navigation bar on the mobile version that looks crammed. There is also no way to download the notes for offline use other than tediously copying and pasting pages.

Here’s how we put our user’s needs first. The process begins below with our initial ideas in a wireframe and low-fidelity prototype, then to the high-fidelity prototype.

From user research, we learned that there were some pain points for users. The two biggest were the navigation bar for the mobile devices and the missing export feature. The crammed navigation bar caused confusion for users and users often selected the wrong button on accident. We solved these issues by simplifying the navigation bar and creating a download feature for notebooks. These changes made the note taking experience more enjoyable, which helped meet the user’s needs.